<template>
  <div class="app-container">
    <el-tab-pane label="流转记录" name="second" style="display: block">
      <!-- 时间线 -->
      <div class="block" style="padding-top: 40px; padding-left: 40px">
        <el-timeline>
          <el-timeline-item v-for="(approve, index) in approves" :key="index" :color="colors(approve.status)">

            <el-card style="width: 90%" shadow="hover">
              <div class="content">
                <span><b>申请人：</b>{{ approve.applicantName }}</span>
                <span><b>审批人：</b>{{ approve.approverName }}</span>
                <span><b>审批内容：</b>{{ approve.name }}</span>
                <span><b>审批时间：</b>{{ parseTime(approve.approveTime) }}</span>
                <span><b>申请时间：</b>{{ parseTime(approve.createTime) }}</span>
              </div>

              <hr color="#eee" />
              <div style="margin-top: 8px">
                状态：<el-button type="text" size="small" :style="fontstyle(approve.status)" class="status">{{approve.status}}</el-button>

                  <div v-if="approve.status === '审批中' && approve.canEdit" style="margin-bottom: 8px; margin-top: 8px">
                    操作：<el-button type="primary" size="mini" @click="pass(approve)">通过</el-button> <el-button type="danger" size="mini" @click="deny(approve)">拒绝</el-button>
                  </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-tab-pane>
  </div>
</template>
<script>
import { listByMissionId, pass, deny } from "@/api/approve/mission";

export default {
  name: "ApproveDetail",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      missionId: 0,
      approves: []
    };
  },
  created() {
    this.missionId = this.$route.params && this.$route.params.missionId;
    this.getList();
  },
  computed: {
    fontstyle () {
      return function (status) {
        if (status === "通过") {
          return {color: 'green'};
        } else if (status === "拒绝") {
          return {color: 'red'};
        }
      }
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      listByMissionId({
        missionId: this.missionId
      }).then(response => {
          this.approves = response.rows;
          this.loading = false;
        }
      );
    },
    colors(status) {
      if (status === "通过") {
        return '#2a9c4a'
      } else if (status === "拒绝") {
        return '#FF0000'
      } else if (status === "审批中") {
        return '#fe9f29'
      }
    },
    pass(row) {
      pass(row).then(response => {
        this.$modal.msgSuccess("审批成功");
        this.getList();
      });
    },
    deny(row) {
      deny(row).then(response => {
        this.$modal.msgSuccess("审批成功");
        this.getList();
      });
    }
    // fontstyle() {
    //   return (icontent) => {
    //     // 使用JavaScript闭包，进行传值操作
    //     console.log(icontent);

    //     if (icontent == '1') {
    //       return {color: 'green'};
    //     } else {
    //       return {color: 'red'};
    //     }
    //   };
    // }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.content {
  display: flex;
  justify-content: space-between;
  padding: 15px 0px;
  span {
    flex: 1;
  }
}
</style>
